Skip to content

[Fix] packages/react issue with useQuery not supporting dynamic query parameters #325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Oct 4, 2024
Merged

[Fix] packages/react issue with useQuery not supporting dynamic query parameters #325

merged 2 commits into from
Oct 4, 2024

Conversation

Chriztiaan
Copy link
Contributor

@Chriztiaan Chriztiaan commented Oct 1, 2024 •
edited
Loading

Original issue reported at #323.
Dynamic query dependencies would warn with the following if the query parameter array changed in size:
Warning: The final argument passed to useMemo changed size between renders. The order and size of this array must remain constant. Previous: [] Incoming: [xxxxxxxxxxxxx]

Tested with the following to verify that it works now:

const [params, setParams] = React.useState<string[]>([]);
const { data } = useQuery(`select * from lists where id=?`, params);

onclick:: setParams(["some-uuid"])

The change from React.useMemo(() => {}, [...array]); to React.useMemo(() => {},[JSON.stringify(array)]) should not introduce any issues, as valid query parameters are expected to be serialisable.

@changeset-bot
Copy link

changeset-bot bot commented Oct 1, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: af14633

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@powersync/react Patch
@powersync/react-native Patch
@powersync/diagnostics-app Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@Chriztiaan Chriztiaan changed the title fix: packages/react issue with useQuery not supporting dynamic query parameters [FIX]: packages/react issue with useQuery not supporting dynamic query parameters Oct 1, 2024
@Chriztiaan Chriztiaan changed the title [FIX]: packages/react issue with useQuery not supporting dynamic query parameters [Fix] packages/react issue with useQuery not supporting dynamic query parameters Oct 1, 2024
@Chriztiaan Chriztiaan marked this pull request as ready for review October 1, 2024 07:59
@DominicGBauer
Copy link
Contributor

We may want to look at something like this in the future https://github.com/sandiiarov/use-deep-compare#readme.

@guillempuche
Copy link
Contributor

Very cool Christian!

@fooware
Copy link

fooware commented Oct 3, 2024

I just got hit with this today in our process of porting over our codebase from Electric. Spent quite some time trying to figure out which useMemo it was, until I found this. Thanks for fixing it @Chriztiaan!

Any idea when this could be merged and released? Is there any canary / nightly one could test after it is merged?

@Chriztiaan
Copy link
Contributor Author

@fooware, I'll release this soonest and ping you.

@Chriztiaan Chriztiaan merged commit 70a70d5 into main Oct 4, 2024
5 checks passed
@Chriztiaan Chriztiaan deleted the fix/use-query-dynamic-query-parameters branch October 4, 2024 09:01
@fooware
Copy link

fooware commented Oct 4, 2024

I can confirm that the console warnings are gone the latest release and the filtering is working as expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@stevensJourney stevensJourney stevensJourney approved these changes

+1 more reviewer

@DominicGBauer DominicGBauer DominicGBauer approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@Chriztiaan @DominicGBauer @guillempuche @fooware @stevensJourney